<template>
  <van-popup custom-style="height: 70%" position="top" :show="showPoup" @close="onClose">
    <div class="my_filter">
      <scroll-view scroll-y class="main_filter">
        <div class="filter_item">
          <div class="filter_title">年龄</div>
          <sideVue ref="sideAgeRef"/>
        </div>
        <div class="filter_item">
          <div class="filter_title">身高</div>
          <sideVue2 ref="sideHeightRef" />
        </div>
        <div class="filter_item">
          <div class="filter_title">学历</div>
          <div class="con_list">
            <div :class="['con_item',curBS == item.id ? 'active_item':'']" v-for="item in recordSchool" :key="item.id" @click="curBS = item.id">{{ item.name }}</div>
          </div>
        </div>
        <div class="filter_item">
          <div class="filter_title">月薪</div>
          <div class="con_list">
            <div :class="['con_item',monthPay == item.id ? 'active_item':'']" v-for="item in monthlyPayList" :key="item.id" @click="monthPay = item.id">{{ item.name }}</div>
          </div>
        </div>
        <div class="filter_item">
          <div class="filter_title">婚况</div>
          <div class="con_list">
            <div :class="['con_item',marry == item.id ? 'active_item':'']" v-for="item in marriageList" :key="item.id" @click="marry = item.id">{{ item.name }}</div>
          </div>
        </div>
        <div class="filter_item">
          <div class="filter_title">实名认证</div>
          <div class="con_list">
            <div :class="['con_item',isVrify == item.id ? 'active_item':'']" v-for="item in verifyList" :key="item.id" @click="isVrify = item.id">{{ item.name }}</div>
          </div>
        </div>
        <div class="filter_select">
          <div class="select_title">现居地</div>
          <div class="selet_r" @click.stop="openLot(1)">
            <div class="selet_value">{{ nowLat }}</div>
            <van-icon class="arrow_icon" name="arrow" />
          </div>
        </div>
        <div class="filter_select">
          <div class="select_title">户籍地</div>
          <div class="selet_r" @click.stop="openLot(2)">
            <div class="selet_value">{{ registerLat }}</div>
            <van-icon class="arrow_icon" name="arrow" />
          </div>
        </div>
        <div class="filter_select">
          <div class="select_title">民族</div>
          <div class="selet_r" @click.stop="nationPoup = true">
            <div class="selet_value">{{ nation }}</div>
            <van-icon class="arrow_icon" name="arrow" />
          </div>
        </div>
      </scroll-view>
      <div class="filter_sub_box">
        <div class="reset_btn_box" @click="myReset">
          <span class="iconfont icon-reset"></span>
          <span class="reset_btn">重置</span>
        </div>
        <div class="submit_btn" @click="mySubmit">确定</div>
      </div>
    </div>
  </van-popup>
  <van-popup position="bottom" :show="LocPoup" @close="LocPoup=false">
    <van-area :area-list="areaList" confirm-button-text="确定" :value="lotCode"
    @confirm="confirmArea" @cancel="LocPoup=false"/>
  </van-popup>
  <van-popup position="bottom" :show="nationPoup" @close="nationPoup=false">
    <van-picker show-toolbar :columns="nationList" :default-index="nationCode" @confirm="selectNation" @cancel="nationPoup=false"/>
  </van-popup>
</template>
<script setup>
  import {ref,reactive,onMounted} from "vue" 
  import sideVue from './slide.vue'
  import sideVue2 from './slide2.vue'
  import {areaList,nationList} from '@/static/js/areaList.ts'
  const props = defineProps(["showPoup"])
  const emits = defineEmits(["closeHomePoup","reset","submit"])
  const sideAgeRef = ref();
  const sideHeightRef = ref();
  const curBS = ref(0);
  const monthPay = ref(0);
  const marry = ref(0);
  const isVrify = ref(0);
  const nowLat = ref('请选择');
  const nowLatCode = ref('');
  const registerLat = ref('请选择');
  const registerLatCode = ref('');
  const nation = ref('请选择');
  const nationCode = ref(0);
  const nationPoup = ref(false);
  const LocPoup = ref(false);
  const lotCode = ref('');
  const lotName = ref(1);
  const recordSchool = reactive([
    {id:0,name:'小学'},
    {id:1,name:'初中'},
    {id:2,name:'中专'},
    {id:3,name:'高中'},
    {id:4,name:'大专'},
    {id:5,name:'本科'},
    {id:6,name:'硕士'},
    {id:7,name:'博士'},
    {id:8,name:'博士后'},
  ])
  const monthlyPayList = reactive([
    {id:0,name:'3k以上'},
    {id:1,name:'5k以上'},
    {id:2,name:'8k以上'},
    {id:3,name:'1.5w以上'},
    {id:4,name:'2w以上'},
    {id:5,name:'3以上'},
    {id:6,name:'5w以上'},
    {id:7,name:'不限'},
  ])
  const marriageList = reactive([
    {id:0,name:'未婚'},
    {id:1,name:'离异'},
    {id:2,name:'不限上'},
  ])
  const verifyList = reactive([
    {id:0,name:'不限'},
    {id:1,name:'实名'},
    {id:2,name:'未实名'},
  ])
  
  const onClose = ()=>{
    emits("closeHomePoup",false)
  }
  const myReset = ()=>{
    curBS.value = 0;
    monthPay.value = 0;
    marry.value = 0;
    isVrify.value = 0;
    nowLatCode.value = '';
    nowLat.value = '请选择';
    registerLat.value = '请选择';
    registerLatCode.value = '';
    nation.value =  '请选择';
    nationCode.value = 0;
    lotCode.value = '';
    lotName.value = 1;
  }
  const mySubmit = ()=>{
    const params = {
      curBS:curBS.value,
      monthPay:monthPay.value,
      isVrify:isVrify.value,
      nowLatCode:nowLatCode.value,
      registerLatCode:registerLatCode.value,
      nationCode:nationCode.value,
      lotCode:lotCode.value,
      lotName:lotName.value,
      age:[sideAgeRef.value.s1AgeVal,sideAgeRef.value.s2AgeVal],
      height:[sideHeightRef.value.s1AgeVal,sideHeightRef.value.s2AgeVal],
    }
    emits('submit',params)
    onClose()
  }
  const openLot = val=>{
    LocPoup.value = true
    lotName.value = val;
    if(val==1){
      lotCode.value = nowLatCode.value
    }else{
      lotCode.value = registerLatCode.value
    }
  }
  const confirmArea = (e)=>{
    const {values} = e.detail
    let str='',code='';
    values.forEach(item => {
      str+=item.name+' '
    });
    code = values.at(values.length-1).code
    if(lotName.value==1){
      nowLat.value = str
      nowLatCode.value = code
    }else{
      registerLat.value = str
      registerLatCode.value = code
    }
    console.log(str,code,'===')
    LocPoup.value = false
  }
  const selectNation = e=>{
    const {value,index} = e.detail;
    nation.value = value;
    nationCode.value = index;
    nationPoup.value = false;
  }
  onMounted(()=>{
    const query = uni.createSelectorQuery().in(this);
  })
</script>
<style scoped lang="scss">
.flexC{
  display: flex;
  align-items: center;
  justify-content: center;
}
.my_filter{
  padding:40rpx 30rpx;
  background-color: #fff;
  box-sizing: border-box;
  position: relative;
  height: 100%;
  .main_filter{
    height: calc(100% - 40px);
    .filter_item{
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      .filter_title{
        margin-top: 10px;
        margin-bottom: 20px;
      }
      .con_list{
        display: flex;
        flex-wrap: wrap;
        .con_item{
          @extend .flexC;
          width: 80px;
          height: 30px;
          border-radius: 15px;
          margin:5px 8px;
          background-color: #F8F8F8;
          color: #323232;
          
          &:nth-child(4n+1){
            margin-left: 5px;
          }
        }
        .active_item{
          background-color: #f5f9ff;
          color: #1C6AD7;
        }
      }
     
    }
    .filter_select{
      border-bottom: 1px solid #ddd;
      @extend .flexC;
      justify-content: space-between;
      height: 40px;
      font-size: 14px;
      color: #323232;
      .selet_r{
        @extend .flexC;
        .selet_value{
          color: #1C6AD7;
          margin-right: 5px;
        }
        .arrow_icon{
          margin-top: 1px;
          color: #ccc;
        }
      }
    }
  }
  .filter_sub_box{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding:20rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    .reset_btn_box{
      @extend .flexC;
      flex-direction: column;
      font-size: 28rpx;
      margin-right: 40rpx;
      color: #1C6AD7;
      .reset_btn{
        margin-top:4rpx;
      }
    }
    .submit_btn{
      height: 60rpx;
      flex: 1;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #fff;
      background-color: #1C6AD7;
      @extend .flexC;
    }
  }
}
</style>
<style lang="scss">
.select_item{
  color: #1C6AD7;
}
</style>